<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弧线的绘制</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.14&key=cee005f5ef04df4d58c24345425ec3ff"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script>
        var map = new AMap.Map('container', {
            center: [116.397637, 39.900001],
            zoom: 14
        });
        var path = [//每个弧线段有两种描述方式
            [116.39, 39.91, 116.37, 39.91],//起点
            //第一段弧线
            [116.380298, 39.907771, 116.38, 39.90],//控制点，途经点
            //第二段弧线
            [116.385298, 39.907771, 116.40, 39.90],//控制点，途经点//弧线段有两种描述方式1
            //第三段弧线
            [//弧线段有两种描述方式2
                [116.392872, 39.887391],//控制点
                [116.40772, 39.909252],//控制点
                [116.41, 39.89]//途经点
            ],
            //第四段弧线
            [116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273]
            //控制点，控制点，途经点，每段最多两个控制点
        ];

        var bezierCurve = new AMap.BezierCurve({
            path: path,
            isOutline: true,
            outlineColor: '#ffeeff',
            borderWeight: 3,
            strokeColor: "#3366FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            // 线样式还支持 'dashed'
            strokeStyle: "solid",
            // strokeStyle是dashed时有效
            strokeDasharray: [10, 10],
            lineJoin: 'round',
            lineCap: 'round',
            zIndex: 50,
        })

        bezierCurve.setMap(map)
        // 缩放地图到合适的视野级别
        map.setFitView([bezierCurve])

        var bezierCurveEditor = new AMap.BezierCurveEditor(map, bezierCurve)

        bezierCurveEditor.on('addnode', function (event) {
            log.info('触发事件：addnode')
        })

        bezierCurveEditor.on('adjust', function (event) {
            log.info('触发事件：adjust')
        })

        bezierCurveEditor.on('removenode', function (event) {
            log.info('触发事件：removenode')
        })

        bezierCurveEditor.on('end', function (event) {
            log.info('触发事件： end')
            // event.target 即编辑后的曲线对象
        })
    </script>
</body>

</html>